import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Header from '../components/header/index';
import LeftMenu from '../components/menu/index';
import CreateStep from './createStep';
import CustomCreateStep from './customCreateStep';

import axios from 'axios';
import Qs from "qs";

import { PlusOutlined } from '@ant-design/icons';
import { withTranslation } from 'react-i18next';

import DefaultIcon from "./img/defaultIcon.png";
import Vision1Icon from "./img/vision1.png";
import Vision2Icon from "./img/vision2.png";
import Vision3Icon from "./img/vision3.png";
import Data1Icon from "./img/data1.png";
import Data2Icon from "./img/data2.png";
import Data3Icon from "./img/data3.png";
import Data4Icon from "./img/data4.png";
import Data5Icon from "./img/data5.png";
import Data6Icon from "./img/data6.png";

import './smallModel.scss';

const urlObj = Qs.parse(window.location.search.split('?')[1]);

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            waxberryList: [],
            waxberryType: "0",
            showCreateStep: false
        };
    }

    componentWillMount() {
        if(urlObj.id){
            //获取纳豆扩展
            axios.get(`${globalInitConfig.REACT_APP_API_BASE_URL}mgr/baseMinModel/extend/findByWaxberryId?waxberryId=${urlObj.id}`).then(r1=> {
                if (r1.data.code === 200) {
                    this.setState({
                        showCreateStep: true,
                        waxberryExtendObj: r1.data.data
                    })
                }
            });
        }else{
            this.getWaxberryList();
        }
    }

    componentDidMount() {

    }

    getWaxberryList() {
        // axios.get(`${globalInitConfig.REACT_APP_API_BASE_URL}mgr/baseMinModel/model/getAllByType?type=${this.state.waxberryType}`).then(res=>{
        //     if(res.data.code === 200){
        //         this.setState({
        //             waxberryList: res.data.data
        //         });
        //     }
        // });
    }

    createWaxberry(obj) {
        if(obj){
            this.setState({
                showCreateStep: true,
                waxberryExtendObj: {
                    type: obj.type,
                    templateName: obj.name
                }
            })
        }else{
            this.setState({
                showCreateStep: true,
                waxberryExtendObj: {
                    type: this.state.waxberryType,
                    templateName: ''
                }
            })
        }
    }

    waxberryTypeChange(type){
        this.setState({
            waxberryType: type
        },()=>{
            this.getWaxberryList();
        })
    }

    render() {
        const { waxberryList,waxberryType,showCreateStep,waxberryExtendObj  } = this.state;
        const { t } = this.props;

        const getPng = (name) => {
            switch (name) {
                case "轴承表面瑕疵检测":
                    return Vision1Icon;
                case "汽车内外饰检测":
                    return Vision2Icon;
                case "物料自动定位":
                    return Vision3Icon;
                case "空冷岛运行优化":
                    return Data1Icon;
                case "火电脱硫工艺优化":
                    return Data2Icon;
                case "锅炉燃烧优化":
                    return Data3Icon;
                case "供热能耗优化":
                    return Data4Icon;
                case "供水加压泵能耗优化":
                    return Data5Icon;
                case "污水处理厂智能加药":
                    return Data6Icon;
                default:
                    return;
            }
        };

        return (
            <div className="small-model-app">
                <Header/>
                <div className="app-content">
                    <LeftMenu menu="home"/>
                    {showCreateStep ?
                        (waxberryExtendObj.templateName ?
                            <CreateStep id={urlObj.id} selectWaxberryObj={waxberryExtendObj}/> :
                            <CustomCreateStep id={urlObj.id} selectWaxberryObj={waxberryExtendObj}/>
                        ) :
                        <div className="app-content-right right_bj">
                            <div className="content-header">
                                <div className="label">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_385_84534"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_385_84534)"><g><path d="M10.904642548828125,22.3479953125C11.202582548828126,22.5201953125,11.539952548828126,22.6126953125,11.884082548828125,22.6162953125C12.228222548828125,22.6126953125,12.565562548828124,22.5201953125,12.863562548828124,22.3479953125L20.403862548828126,18.0410953125C21.008162548828125,17.6921953125,21.381162548828126,17.048295312500002,21.383262548828124,16.350595312499998L21.383262548828124,7.7234453125C21.367662548828125,7.0116153125,20.966962548828125,6.3643453125,20.336762548828126,6.0329053125L12.863562548828124,1.7126353125C12.257442548828125,1.3627153125,11.510722548828126,1.3627153125,10.904642548828125,1.7126353125L3.444802548828125,6.0329053125C2.840544548828125,6.3817653125,2.467465708828125,7.0257153125,2.465362548828125,7.7234453125L2.465362548828125,16.350595312499998C2.467385458828125,17.0447953125,2.834280548828125,17.6868953125,3.431385548828125,18.0410953125L10.904642548828125,22.3479953125ZM7.388322548828125,10.3198553125Q7.272752548828125,10.4333453125,7.137462548828125,10.5224153125Q7.002172548828125,10.6114853125,6.852252548828125,10.6727953125Q6.702332548828125,10.7340953125,6.543412548828125,10.7653353125Q6.3844825488281245,10.7965753125,6.222512548828125,10.7965753125Q6.140762548828125,10.7965753125,6.059412548828125,10.7885653125Q5.978052548828125,10.7805453125,5.897882548828125,10.7645953125Q5.817702548828125,10.7486453125,5.739472548828125,10.7249153125Q5.661242548828125,10.7011753125,5.585722548828125,10.6698953125Q5.510192548828125,10.6386053125,5.438102548828125,10.6000653125Q5.366002548828125,10.5615153125,5.298032548828125,10.5160953125Q5.2300625488281245,10.4706753125,5.166872548828125,10.4188053125Q5.103672548828126,10.3669353125,5.045872548828125,10.3091253125Q4.988062548828125,10.2513053125,4.936202548828125,10.1881053125Q4.8843425488281245,10.1249053125,4.838932548828125,10.0569153125Q4.793512548828125,9.9889353125,4.754972548828125,9.9168353125Q4.716442548828125,9.8447253125,4.685152548828125,9.7691853125Q4.653872548828125,9.6936553125,4.630142548828125,9.6154153125Q4.606412548828125,9.5371753125,4.590462548828125,9.4569853125Q4.574512548828125,9.3767953125,4.566502548828125,9.2954253125Q4.558492548828125,9.214055312500001,4.558492548828125,9.1322953125Q4.558492548828125,9.0505353125,4.566502548828125,8.969175312499999Q4.574512548828125,8.8878053125,4.590462548828125,8.807615312500001Q4.606412548828125,8.7274253125,4.630142548828125,8.6491853125Q4.653872548828125,8.570945312500001,4.685152548828125,8.4954053125Q4.716442548828125,8.4198653125,4.754972548828125,8.3477653125Q4.793512548828125,8.2756553125,4.838932548828125,8.207675312500001Q4.8843425488281245,8.139695312499999,4.936202548828125,8.076485312500001Q4.988062548828125,8.013285312499999,5.045872548828125,7.9554753125Q5.103672548828126,7.8976653125,5.166872548828125,7.8457953125Q5.2300625488281245,7.7939253125,5.298032548828125,7.7484953125Q5.366002548828125,7.7030753125,5.438102548828125,7.6645353125Q5.510192548828125,7.6259953125,5.585722548828125,7.5947053125Q5.661242548828125,7.5634153125,5.739472548828125,7.5396853125Q5.817702548828125,7.5159453125,5.897882548828125,7.4999953125Q5.978052548828125,7.4840453125,6.059412548828125,7.4760353125Q6.140762548828125,7.4680153125,6.222512548828125,7.4680153125Q6.302552548828125,7.4680153125,6.382222548828125,7.4757053125Q6.461892548828125,7.4833853125,6.540462548828125,7.4986753125Q6.619032548828125,7.5139753125,6.695762548828125,7.5367453125Q6.772502548828125,7.5595153125,6.846692548828125,7.5895353125Q6.920892548828125,7.6195653125,6.991862548828125,7.6565753125Q7.062842548828125,7.6935953125,7.129932548828125,7.7372453125Q7.197022548828125,7.7809053125,7.259622548828125,7.8307953125Q7.322212548828125,7.8806853125,7.379732548828125,7.9363553125Q7.437242548828125,7.9920253125,7.489152548828125,8.0529653125Q7.541062548828125,8.1139053125,7.586882548828125,8.1795353125Q7.632702548828125,8.245175312499999,7.672012548828125,8.314905312499999Q7.711322548828125,8.3846453125,7.743762548828125,8.457825312499999Q7.776202548828125,8.5310153125,7.801462548828125,8.606975312500001Q7.826732548828125,8.6829353125,7.844592548828125,8.7609653125Q7.862452548828125,8.8390053125,7.872732548828125,8.9183953125Q7.883022548828125,8.9977853125,7.885642548828125,9.077795312500001L11.888492548828125,10.6220353125L15.883962548828125,9.058175312500001Q15.887462548828125,8.978845312499999,15.898562548828124,8.900205312499999Q15.909662548828125,8.821565312499999,15.928162548828125,8.7443453125Q15.946662548828124,8.6671153125,15.972462548828124,8.5920053125Q15.998262548828125,8.5168953125,16.031062548828125,8.4445853125Q16.063862548828126,8.372275312500001,16.103462548828126,8.3034153125Q16.143062548828127,8.2345553125,16.188962548828123,8.1697853125Q16.234862548828126,8.105005312500001,16.286762548828126,8.0448953125Q16.338662548828125,7.9847953125,16.396062548828127,7.9299053125Q16.453462548828124,7.8750153125,16.515862548828125,7.8258353125Q16.578162548828125,7.7766653125,16.644962548828126,7.7336553125Q16.711662548828123,7.6906453125,16.782262548828125,7.6541853125Q16.852762548828125,7.6177253125,16.926462548828127,7.5881553125Q17.000162548828126,7.5585853125,17.076362548828126,7.5361653125Q17.152562548828126,7.5137553125,17.230562548828125,7.4986953125Q17.308562548828125,7.4836353125,17.387562548828125,7.4760653125Q17.466662548828126,7.4685053125,17.546062548828125,7.4685053125Q17.627762548828123,7.4685053125,17.709062548828125,7.4765153125Q17.790462548828124,7.4845253125,17.870562548828126,7.5004753125Q17.950762548828123,7.5164153125,18.028962548828126,7.5401453125Q18.107162548828125,7.5638653125,18.182662548828127,7.5951453125Q18.258262548828124,7.6264253125,18.330262548828124,7.6649553125Q18.402362548828123,7.7034853125,18.470362548828124,7.7488853125Q18.538262548828126,7.7942953125,18.601462548828124,7.8461453125Q18.664662548828126,7.8979953125,18.722462548828126,7.9557953125Q18.780262548828127,8.0135853125,18.832062548828127,8.076765312500001Q18.883962548828126,8.1399453125,18.929362548828124,8.2079053125Q18.974762548828124,8.275865312499999,19.013262548828123,8.3479453125Q19.051862548828126,8.4200253125,19.083062548828124,8.4955353125Q19.114362548828126,8.5710453125,19.138062548828124,8.649265312499999Q19.161862548828125,8.727475312500001,19.177762548828124,8.8076353125Q19.193762548828126,8.8878053125,19.201762548828125,8.9691453125Q19.209762548828124,9.0504753125,19.209762548828124,9.1322153125Q19.209762548828124,9.2139453125,19.201762548828125,9.295285312499999Q19.193762548828126,9.3766253125,19.177762548828124,9.4567853125Q19.161862548828125,9.5369453125,19.138062548828124,9.6151553125Q19.114362548828126,9.6933753125,19.083062548828124,9.7688853125Q19.051862548828126,9.8443953125,19.013262548828123,9.9164753125Q18.974762548828124,9.9885553125,18.929362548828124,10.0565153125Q18.883962548828126,10.1244753125,18.832062548828127,10.1876553125Q18.780262548828127,10.2508353125,18.722462548828126,10.3086253125Q18.664662548828126,10.3664253125,18.601462548828124,10.4182753125Q18.538262548828126,10.4701253125,18.470362548828124,10.5155353125Q18.402362548828123,10.5609453125,18.330262548828124,10.5994653125Q18.258262548828124,10.6379953125,18.182662548828127,10.6692753125Q18.107162548828125,10.7005553125,18.028962548828126,10.7242753125Q17.950762548828123,10.7480053125,17.870562548828126,10.7639453125Q17.790462548828124,10.7798953125,17.709062548828125,10.7879053125Q17.627762548828123,10.7959153125,17.546062548828125,10.7959153125Q17.379362548828126,10.7959153125,17.216062548828127,10.7628753125Q17.052762548828127,10.7298353125,16.899262548828126,10.6650553125Q16.745762548828125,10.6002853125,16.608162548828126,10.5063553125Q16.470462548828124,10.4124253125,16.354262548828125,10.2930653125L12.462212548828125,11.8572953125L12.462212548828125,17.0022953125Q12.588262548828125,17.0416953125,12.706562548828124,17.100595312499998Q12.824862548828126,17.1594953125,12.932362548828126,17.236295312499998Q13.039962548828125,17.3130953125,13.133962548828125,17.4058953125Q13.228062548828126,17.4987953125,13.306262548828125,17.6052953125Q13.384562548828125,17.7117953125,13.444962548828125,17.8292953125Q13.505462548828126,17.9467953125,13.546562548828126,18.0723953125Q13.587762548828126,18.1978953125,13.608662548828125,18.3284953125Q13.629462548828124,18.4589953125,13.629462548828124,18.5910953125Q13.629462548828124,18.6728953125,13.621462548828125,18.7542953125Q13.613462548828124,18.8356953125,13.597462548828124,18.9158953125Q13.581562548828124,18.9960953125,13.557762548828125,19.0743953125Q13.534062548828125,19.1526953125,13.502762548828125,19.2281953125Q13.471462548828125,19.3037953125,13.432962548828124,19.3758953125Q13.394362548828125,19.4480953125,13.348962548828124,19.5160953125Q13.303562548828126,19.5840953125,13.251662548828126,19.6472953125Q13.199762548828126,19.7104953125,13.141962548828126,19.7683953125Q13.084162548828125,19.8261953125,13.020962548828125,19.8780953125Q12.957762548828125,19.9299953125,12.889762548828125,19.9753953125Q12.821762548828126,20.0207953125,12.749662548828125,20.0593953125Q12.677562548828124,20.0979953125,12.602062548828124,20.1292953125Q12.526462548828125,20.1605953125,12.448262548828126,20.1842953125Q12.370012548828125,20.2079953125,12.289822548828125,20.2239953125Q12.209632548828125,20.2399953125,12.128262548828125,20.2479953125Q12.046892548828126,20.2559953125,11.965132548828125,20.2559953125Q11.883362548828124,20.2559953125,11.801992548828125,20.2479953125Q11.720622548828125,20.2399953125,11.640432548828125,20.2239953125Q11.560232548828125,20.2079953125,11.481992548828124,20.1842953125Q11.403752548828125,20.1605953125,11.328212548828125,20.1292953125Q11.252672548828125,20.0979953125,11.180562548828124,20.0593953125Q11.108452548828126,20.0207953125,11.040472548828125,19.9753953125Q10.972482548828125,19.9299953125,10.909282548828125,19.8780953125Q10.846072548828126,19.8261953125,10.788262548828126,19.7683953125Q10.730442548828124,19.7104953125,10.678572548828125,19.6472953125Q10.626702548828124,19.5840953125,10.581282548828124,19.5160953125Q10.535852548828124,19.4480953125,10.497312548828125,19.3758953125Q10.458762548828126,19.3037953125,10.427472548828124,19.2281953125Q10.396182548828126,19.1526953125,10.372452548828125,19.0743953125Q10.348722548828125,18.9960953125,10.332762548828125,18.9158953125Q10.316812548828125,18.8356953125,10.308802548828126,18.7542953125Q10.300792548828124,18.6728953125,10.300782548828124,18.5910953125Q10.300792548828124,18.4828953125,10.314792548828125,18.3755953125Q10.328792548828126,18.2682953125,10.356572548828126,18.1636953125Q10.384342548828126,18.0590953125,10.425422548828125,17.9589953125Q10.466492548828125,17.8588953125,10.520182548828124,17.7648953125Q10.573862548828124,17.6709953125,10.639252548828125,17.5847953125Q10.704652548828125,17.4985953125,10.780642548828125,17.4215953125Q10.856642548828125,17.344595312499997,10.941972548828126,17.2779953125Q11.027292548828125,17.2114953125,11.120512548828126,17.156595312500002L11.120512548828126,11.8448953125L7.388322548828125,10.3198553125Z" fill="currentColor"/></g></g></svg>
                                    {t('menu.smallModel')}
                                </div>
                            </div>
                            <div className="content-data-tool">
                                <div className="waxberry-type">
                                    <div className={waxberryType==="0"?"type type-active":"type"} onClick={()=>this.waxberryTypeChange("0")}>
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><defs><clipPath id="master_svg0_385_56091"><rect x="0" y="0" width="18" height="18" rx="0"/></clipPath><linearGradient x1="0.0667826309800148" y1="0.17080801725387573" x2="1.026781244454206" y2="0.9817690884057395" id="master_svg1_385_86194"><stop offset="0%" stopColor="#2460EA"/><stop offset="100%" stopColor="#537EE1"/></linearGradient></defs><g clipPath="url(#master_svg0_385_56091)"><g><path d="M6.749969482421875,2.25L11.249969482421875,2.25L12.749969482421875,3.75L15.749969482421875,3.75C16.164169482421876,3.75,16.499969482421875,4.08579,16.499969482421875,4.5L16.499969482421875,15C16.499969482421875,15.4142,16.164169482421876,15.75,15.749969482421875,15.75L2.249969482421875,15.75C1.835756482421875,15.75,1.499969616531875,15.4142,1.499969482421875,15L1.499969482421875,4.5C1.499969482421875,4.08579,1.835755482421875,3.75,2.249969482421875,3.75L5.249969482421875,3.75L6.749969482421875,2.25ZM8.999969482421875,14.25C11.485249482421874,14.25,13.499969482421875,12.23528,13.499969482421875,9.75C13.499969482421875,7.26472,11.485249482421874,5.25,8.999969482421875,5.25C6.514689482421875,5.25,4.499969482421875,7.26472,4.499969482421875,9.75C4.499969482421875,12.23528,6.514689482421875,14.25,8.999969482421875,14.25ZM8.999969482421875,12.75C7.342539482421875,12.7508,5.998509482421875,11.40743,5.998509482421875,9.75C5.998509482421875,8.09257,7.342539482421875,6.74919,8.999969482421875,6.75C10.656249482421876,6.75081,11.998469482421875,8.093720000000001,11.998469482421875,9.75C11.998469482421875,11.40628,10.656249482421876,12.7492,8.999969482421875,12.75Z" fill="url(#master_svg1_385_86194)"/></g></g></svg>
                                        <span>{t('smallModelView.visualModel')}</span>
                                    </div>
                                    <div className={waxberryType==="1"?"type type-active":"type"} onClick={()=>this.waxberryTypeChange("1")}>
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><defs><clipPath id="master_svg0_385_56095"><rect x="0" y="0" width="18" height="18" rx="0"/></clipPath><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg1_41_03204"><stop offset="0%" stopColor="#7373FF"/><stop offset="100%" stopColor="#4E4EBB"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg2_41_03204"><stop offset="0%" stopColor="#7373FF"/><stop offset="100%" stopColor="#4E4EBB"/></linearGradient></defs><g clipPath="url(#master_svg0_385_56095)"><g><path d="M9.546295166015625,8.223555859375L16.231495166015627,8.208255859375C15.924595166015624,4.685655859375,13.084195166015625,1.879455859375,9.546295166015625,1.624755859375L9.546295166015625,8.223555859375ZM10.285194166015625,9.419655859375L14.537695166015624,13.610055859375C15.515095166015625,12.460755859375,16.138795166015626,11.003655859375,16.243195166015624,9.406155859375L10.285194166015625,9.419655859375Z" fill="url(#master_svg1_41_03204)"/></g><g><path d="M8.542789428710938,9.44359609375C8.435369428710938,9.33761609375,8.374779428710937,9.19309609375,8.374489428710937,9.04219609375L8.374489428710937,1.64599609375C4.560289428710938,1.95379609375,1.5497894287109375,5.15419609375,1.5497894287109375,9.045796093749999C1.5497894287109375,13.14079609375,4.881589428710937,16.47259609375,8.976589428710938,16.47259609375C10.832389428710938,16.47259609375,12.529789428710938,15.78679609375,13.832989428710938,14.65729609375L8.542789428710938,9.44359609375Z" fill="url(#master_svg2_41_03204)"/></g></g></svg>
                                        <span>{t('smallModelView.dataModel')}</span>
                                    </div>
                                </div>
                                <span className="count">{t('myWaxberry.totalItem.prefix')}{waxberryList.length}{t('myWaxberry.totalItem.suffix')}</span>
                            </div>
                            <div className="content-data-waxberry">
                                <div className="create-card">
                                    <img src={DefaultIcon} width="484" height="276"/>
                                    <div className="button" onClick={()=>this.createWaxberry()}><PlusOutlined/>{t('smallModelView.createSmallModel')}</div>
                                    <span className="desc">{t('smallModelView.buildLightweightSmallModel')}</span>
                                </div>
                                {waxberryList.map(item=>(
                                    <div className="card" key={item.id} onClick={()=>this.createWaxberry(item)}>
                                        <img src={getPng(item.name)} width="484" height="176"/>
                                        <div className="cardContent">
                                            <div className="cardInfo">
                                                <span className="card-title">{item.name}</span>
                                                <div className="card-desc">{item.description}</div>
                                                <div className="card-tags">
                                                    {item.label && item.label.split(",").map(label=>(
                                                        <span className="tag" key={label}>{label}</span>
                                                    ))}
                                                </div>
                                            </div>
                                            <div className="card-footer">
                                                <div className="button" onClick={()=>this.createWaxberry()}><PlusOutlined/>{t('smallModelView.applyTemplate')}</div>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                            <div className="tip">{t('smallModelView.clickCreateToGenerateOrCustomize')}</div>
                        </div>
                    }
                </div>
            </div>
        );
    }
}
export default withTranslation()(App);
